<template>
    
    <el-form ref="formRef" class="pl-3" :model="formData" label-width="110px" inline>
        
        <el-card class="!border-none flex flex-1  mt-4 " shadow="never">
            
            <el-tabs class="flex flex-1 items-center" tab-position="left">
                <el-tab-pane class="text-2xl font-medium" disabled>参考信息 : {{ formData.afterSaleOrderNo }}
                </el-tab-pane>
            </el-tabs>
        </el-card>
        
        <!--       基本信息-->
        <el-card class="!border-none flex flex-1  justify-center items-center" shadow="never">
            
            <div class=" text-lg	 mb-4">
                基本信息
            </div>
            
            <div class="pl-3 grid grid-cols-4 gap-0">
                <div>
                    <el-form-item label="工单类型 :" prop="afterSaleOrderType">
                        
                        <p v-for="item in afterSaleOrderConfig.afterSaleOrderType"
                           v-show="item.code ===formData.afterSaleOrderType "
                           class="text-tx-regular">
                            {{ item.name }}
                        </p>
                    
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="渠道 :" prop="channel">
                        
                        <p v-for="item in afterSaleOrderConfig.orderChannelConfig "
                           v-show="item.name ===formData.channel "
                           class="text-tx-regular">
                            
                            {{ item.value }}
                        </p>
                    
                    
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="店铺 :" prop="shopName">
                        <p v-for="item in shopNameList "
                           v-show="item.name ===formData.shopName "
                           class="text-tx-regular">
                            
                            {{ item.value }}
                        </p>
                    </el-form-item>
                </div>
            </div>
        </el-card>
        
        <!--        拒收地址-->
        <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
            
            <div class=" text-lg	 mb-4">
                拒收地址
            </div>
            
            <div class=" w-[800px]">
                <div class="pl-3 grid grid-cols-2 gap-0">
                    <el-form-item label="收件人 :" prop="userName">
                        <p class="text-tx-regular">
                            {{ formData.rejectAfterSaleAddress?.userName }}
                        </p>
                    </el-form-item>
                    <el-form-item label="电话 :" prop="userPhone">
                        <p class="text-tx-regular">
                            {{ formData.rejectAfterSaleAddress?.userPhone }}
                        </p>
                    </el-form-item>
                    
                    <el-form-item label="详细地址 :" prop="address">
                        <p class="text-tx-regular">
                            {{ formData.rejectAfterSaleAddress?.addressFull }}
                        </p>
                    </el-form-item>
                
                
                </div>
            </div>
        </el-card>
        
        <!--        物料 信息-->
        <el-card class="!border-none flex flex-1  mt-4 " shadow="never">
            
            <el-tabs class="flex flex-1 items-center" tab-position="left">
                <el-tab-pane class="text-2xl font-medium" disabled>物料详情</el-tab-pane>
            </el-tabs>
        </el-card>
        
        
        <el-card class="!border-none   " shadow="never">
            
            
            <el-table
                ref="tableRef"
                class="mt-0.5 ml-4 mb-10 rounded-t-lg"
                size="default"
                :data="formData.afterSaleItemLineInfoList"
            >
                
                <el-table-column type="index" fixed label="行号" width="70"/>
                
                
                <el-table-column label="发出物料状态" prop="status" min-width="120" fixed>
                    <template #default="{ row }">
                        <ScSignSvgRound v-for="(item,index)   in afterSaleOrderConfig.afterSaleOrderLineStatus"
                                        v-show=" row.inMaterIalInfo.status === item.code"
                                        :key=index
                                        :background="item.type"
                                        :value="item.name"/>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="售后69码" prop="batch" min-width="150">
                    
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.batch }}</p>
                    </template>
                
                </el-table-column>
                
                
                <el-table-column label="售后物料编码" prop="itemCode" min-width="150">
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.itemCode }}</p>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="售后物料名称" prop="itemName" min-width="150">
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.itemName }}</p>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="售后SN" prop="itemName" min-width="150">
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.sn }}</p>
                    </template>
                </el-table-column>
            
            </el-table>
        
        </el-card>
    </el-form>
    
    
    <!--    弹窗-->
    <Popup ref="popupRef"
           :async="true"
           width="460px"
           @confirm="popupRefConfirm"
           @close="showPopupRefRef=false"
           v-if="showPopupRefRef">
        <el-form ref="formRef" class="pl-3 mb-6" :model="queryFormData" label-width="100px" inline>
            <el-form-item label="发运单类型:" prop="type"
                          :rules="[{required: true, message: '请输入发运单类型', trigger: 'change'}]">
                
                <el-select class="w-64" v-model="queryFormData.type" placeholder="请选择发运单类型">
                    <el-option
                        v-for="item in afterSaleRejectTypeEnumLists"
                        :label="item.name"
                        :value="item.code"/>
                </el-select>
            </el-form-item>
            
            <el-form-item label="物流公司:" prop="logisticCompany"
                          v-if="queryFormData.type === AfterSaleRejectTypeEnum.OFFLINE_RETURN"
                          :rules="[{required: true, message: '请输入线下物流公司', trigger: 'change'}]">
                
                <el-input class="w-64" v-model="queryFormData.logisticCompany"
                          placeholder="请输入物流公司"></el-input>
            </el-form-item>
            
            <el-form-item label="物流单号:" prop="logisticNumber"
                          v-if="queryFormData.type ===AfterSaleRejectTypeEnum.OFFLINE_RETURN"
                          :rules="[{required: true, message: '请输入线下物流单号', trigger: 'change'}]">
                
                <el-input class="w-64" v-model="queryFormData.logisticNumber"
                          placeholder="请输入物流单号"></el-input>
            
            </el-form-item>
        
        
        </el-form>
    </Popup>
    
    <footer-btns>
        <el-button type="primary" @click="handleShipping">确认退回</el-button>
    </footer-btns>

</template>

<script lang='ts' setup>
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {useFormatterManager} from "@/manager/base/FormatterManager";
import AfterSaleSendOrderInfo from "@/api/afterSale/order/dto/AfterSaleSendOrderInfo";
import IdRequest from "@/api/baisc/IdRequest";
import feedback from "@/utils/feedback";
import {Ref, UnwrapRef} from "vue";
import AfterSaleCreateShippingRequest from "@/api/afterSale/warehouse/request/AfterSaleCreateShippingRequest";
import {createRejectShippingOrder} from "@/api/afterSale/warehouse/AfterSaleShippingController";
import AfterSaleRejectOrderInfo from "@/api/afterSale/order/dto/AfterSaleRejectOrderInfo";
import {getRejectOrderAfterInfo} from "@/api/afterSale/order/AfterSaleOrderController";
import RouterManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import useMultipleTabsManager from "@/manager/base/MultipleTabsManager";
import {AfterSaleRejectTypeEnum, AfterSaleRejectTypeEnumList} from "@/config/enums/aftersale/AfterSaleRejectTypeEnum";
import {AfterSaleOrderLineStatusEnum} from "@/config/enums/aftersaleEnums";
import {AfterSaleOrderStatusEnum} from "@/config/enums/aftersale/AfterSaleOrderStatusEnum";

let multipleTabsManager = useMultipleTabsManager();
let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);
let formRef = shallowRef();
let popupRef = shallowRef();
let showPopupRefRef = ref(false);

const afterSaleRejectTypeEnumLists :Ref<any []>= ref([])



/**
 * 数据
 *
 * @author 徐寿春
 * 2023/4/23 17:06
 */
let formData: UnwrapNestedRefs<AfterSaleRejectOrderInfo> = reactive(new AfterSaleRejectOrderInfo())
const queryFormData: UnwrapRef<AfterSaleCreateShippingRequest> = reactive(new AfterSaleCreateShippingRequest)


const shopNameList = computed(() => {
    return formatterManager.computeFormatterShop(formData.channel)
})




/**
 *  预处理提交发运单
 *
 * @author 徐寿春
 * 2023/4/24 09:07
 */
async function handleShipping() {
    showPopupRefRef.value = true
    await nextTick()
    popupRef.value.open()
}

/**
 * 退回请求
 *
 * @author 徐寿春
 * 2023/5/6 18:19
 */
async function popupRefConfirm() {
    
    await formRef.value?.validate()
    
    let map: any [] = formData.afterSaleItemLineInfoList.map(item => item.inMaterIalInfo.afterSaleOrderLineId);
    if (map.length > 0) {
        queryFormData.afterSaleOrderLineIds = map
    } else {
        feedback.msgError("当前无退回工单物料数据")
    }
    queryFormData.afterSaleOrderId = formData.afterSaleOrderId
    queryFormData.afterSaleOrderNo = formData.afterSaleOrderNo
    
    createRejectShippingOrder(queryFormData).then(() => {
        feedback.notifySuccess("提交拒收发运单成功")
        popupRef.value.close()
        
        multipleTabsManager.removeTab()
        let routePathByName = RouterManager.getRoutePathByName("afterSaleOrder/logistics/reject/index");
        if (!!routePathByName) {
            router.push(routePathByName)
        }
        
    })
    
}


// ------------------------------------------------------ 基础数据  ------------------------------------------------------
/**
 * 获取数据
 *
 * @author 徐寿春
 * 2023/4/24 09:26
 */
function getData(id: number) {
    let idRequest = new IdRequest();
    idRequest.id = id
    getRejectOrderAfterInfo(idRequest).then((item: AfterSaleSendOrderInfo) => {
        for (let formDataKey in formData) {
            //@ts-ignore
            formData[formDataKey] = item[formDataKey]
        }
    })
    
    if (formData.afterSaleOrderStatus == AfterSaleOrderStatusEnum.WAIT_RETURN) {
        afterSaleRejectTypeEnumLists.value =  AfterSaleRejectTypeEnumList;
    } else {
        afterSaleRejectTypeEnumLists.value = AfterSaleRejectTypeEnumList.splice(1);
    }
    
    
}


const emit = defineEmits(['success', 'close'])
let route = useRoute();


onMounted(() => {
    getData(route.query?.id as any)
})

defineExpose({
    open,
    close
})


</script>




